import React, {Component} from 'react'
import {Text, View, StyleSheet, Button, Image, FlatList, ScrollView} from 'react-native'
import ProductListView from "../../component/page/productList/productListView";
import {screenHeight} from "../../style";
import {ProductStore} from "../../store/modules/main/product";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import {ProductListStore} from "../../store/modules/main/productList";


interface productListProps extends Store {

}

@inject("productList")
@observer
export default class productList extends Component<productListProps> {
    async componentDidMount() {
        await this.refresh(false);
    }

    state = {
        pageNum: 1,
        pageSize: 10
    };
    productList: ProductListStore;
    productListView: ProductListView;


    refresh = async (showToast = true) => {
        const pageNum = 1;
        this.setState({
            pageNum
        });
        await this.productList.refreshProducts(pageNum, this.state.pageSize);
        showToast&&global.showSuccess("刷新成功!");
        const {products, count} = this.productList;
        this.productListView.refreshComplete(products.length !== count);
    };

    constructor(props) {
        super(props);
        this.productList = this.props.productList;
    }

    getProducts = (pageNum: number, pageSize: number) => {
        this.productList.getProducts(pageNum, pageSize);
    };
    /**
     * 加载更多
     * @private
     */
    loadMore = async () => {
        const {products, count} = this.productList;
        if (products.length !== count) {
            const curPageNum = this.state.pageNum + 1;
            this.setState({
                pageNum: curPageNum,
            });
            await this.getProducts(curPageNum, this.state.pageSize);
            this.productListView.loadMoreComplete(products.length !== count);
        }
    };

    render() {
        return (
            <View style={ProductStyles.container}>
                <ProductListView count={this.productList.count}
                                 loadMore={this.loadMore}
                                 products={this.productList.products} refresh={this.refresh}
                                 ref={productListView => this.productListView = productListView}
                                 listStyle={{height: null, flex: 1, paddingTop: 10}}/>

            </View>
        )
    }
}


const ProductStyles = StyleSheet.create({
    container: {
        backgroundColor: "#f5f5f5",
        flex: 1,
        marginTop:5
    }
});
